<template>
  <div>
    <el-form
      ref="tinySaleForm"
      :model="ruleForm"
      :rules="rules"
      status-icon
      label-width="207px"
      class="tinysale-setting"
    >
      <el-form-item label="网校名称" prop="name">
        <el-input v-model="ruleForm.name"/>
      </el-form-item>
      <el-form-item label="网校域名" prop="domainName">
        <el-input v-model="ruleForm.domainName"/>
      </el-form-item>
      <el-form-item label="网校LOGO" prop="logoUrl">
        <img v-if="ruleForm.logoUrl" :src="ruleForm.logoUrl">
        <el-upload
          :on-change="handleChange"
          :http-request="uploadLogoFile"
          :show-file-list="false"
          :limit="1"
          class="upload-demo"
          action=""
        >
          <el-button size="small">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">你可以上传jpg、png格式的文件，图片尺寸为250*50像素，文件大小不能超过50K。</div>
        </el-upload>
      </el-form-item>
      <el-form-item label="网校简介" prop="intro">
        <el-input :rows="4" v-model="ruleForm.description" type="textarea"/>
      </el-form-item>
      <el-form-item label="咨询电话" prop="hotline">
        <el-input v-model="ruleForm.phone"/>
      </el-form-item>
      <el-form-item label="咨询QQ" prop="QQNumber">
        <el-input v-model="ruleForm.qqNum"/>
      </el-form-item>
      <el-form-item label="宣传海报" >
        <img v-if="ruleForm.poster" :src="ruleForm.poster">
        <el-upload
          :on-change="handleChange"
          :http-request="uploadPosterFile"
          :limit="1"
          :show-file-list="false"
          class="upload-demo"
          action=""
        >
          <el-button size="small">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">你可以上传jpg、png格式的文件，图片尺寸为900x500像素，文件大小不能超过2M。</div>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">保 存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { upLoadFile } from '@/api/upLoadFile'
import { getTenantId, getUserName } from '@/utils/auth'
import { getActivitySetting, saveOrUpdateActivitySetting } from '@/api/tinysale/addActivity'
export default {
  data() {
    return {
      ruleForm: {},
      file: '',
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ],
        domainName: [
          { required: true, message: '请输入网校域名', trigger: 'blur' }
        ],
        logoUrl: [
          { required: true, message: '请上传网校LOGO' }
        ]
      }
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      getActivitySetting(getTenantId()).then(res => {
        if (res.data.item) {
          this.ruleForm = res.data.item
        }
      })
    },
    submitForm() {
      this.$refs.tinySaleForm.validate(valid => {
        if (valid) {
          if (!this.ruleForm.id) {
            this.ruleForm.tenantId = getTenantId()
            this.ruleForm.creator = getUserName()
          }
          saveOrUpdateActivitySetting(this.ruleForm).then(res => {
            this.getData()
            this.$notify({
              title: '成功',
              message: '成功',
              type: 'success',
              duration: 2000
            })
          })
        }
      })
    },
    handleChange(file) {
      this.file = file.raw
    },
    uploadLogoFile() {
      const fileForm = new FormData()
      fileForm.append('name', this.file.name)
      fileForm.append('uid', this.file.uid)
      fileForm.append('file', this.file)
      upLoadFile(fileForm).then(response => {
        this.ruleForm.logoUrl = response.data.url
      })
    },
    uploadPosterFile() {
      const fileForm = new FormData()
      fileForm.append('name', this.file.name)
      fileForm.append('uid', this.file.uid)
      fileForm.append('file', this.file)
      upLoadFile(fileForm).then(response => {
        this.ruleForm.poster = response.data.url
      })
    }
  }
}
</script>

<style lang="scss">
.tinysale-setting {
  margin-top: 30px;
  .el-input {
    width: 350px;
  }
  .el-textarea{
    width:350px;
  }
}
</style>
